<template>
  <div class="service-selector">
    <a-input
      :value="displayValue"
      placeholder="请点击按钮选择服务"
      readonly
      style="width: calc(100% - 90px); margin-right: 10px"
    />
    <a-button type="primary" @click="openModal">
      选择服务
    </a-button>

    <!-- 弹窗 -->
    <a-modal
      v-model:visible="visible"
      title="选择服务分类"
      width="90%"
      :style="{ maxWidth: '900px' }"
      :bodyStyle="{ height: '70vh', padding: 0 }"
      @ok="handleConfirm"
      @cancel="handleCancel"
    >
      <iframe
        ref="iframeRef"
        :src="iframeUrl"
        frameborder="0"
        style="width: 100%; height: 100%; border: none"
      />
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, watch, onMounted, onBeforeUnmount } from 'vue';
import { useUserStore } from '/@/store/modules/user';

const props = defineProps({
  value: {
    type: String,
    default: '',
  },
});

const emit = defineEmits(['update:value', 'change']);

const userStore = useUserStore();
const visible = ref(false);
const iframeRef = ref<HTMLIFrameElement>();
const selectedService = ref<{ id: string; name: string } | null>(null);

// 显示值（服务名称）
const displayValue = computed(() => {
  return selectedService.value?.name || '';
});

// iframe URL
const iframeUrl = computed(() => {
  const token = userStore.getToken;
  const validate = '0';
  return `https://anfine.huasun-healthcare.com/list/choose.html?token=${token}&validate=${validate}`;
});

// 打开弹窗
function openModal() {
  visible.value = true;
}

// 关闭弹窗
function handleCancel() {
  visible.value = false;
}

// 确定选择
function handleConfirm() {
  const iframe = iframeRef.value;
  if (!iframe) {
    return;
  }

  try {
    // 向 iframe 发送消息，请求获取选中的服务信息
    iframe.contentWindow?.postMessage(
      {
        action: 'getSelectedService',
      },
      '*'
    );

    // 设置超时提醒
    setTimeout(() => {
      if (!selectedService.value || !selectedService.value.id) {
        // 如果1秒后还没收到消息，可能是用户未选择
        console.warn('未收到服务选择信息');
      }
    }, 1000);
  } catch (error) {
    console.error('发送消息失败:', error);
  }
}

// 处理来自 iframe 的消息
function handleMessage(event: MessageEvent) {
  if (event.data && event.data.action === 'selectedService') {
    const serviceInfo = event.data.data;

    if (serviceInfo && serviceInfo.id && serviceInfo.name) {
      selectedService.value = {
        id: serviceInfo.id,
        name: serviceInfo.name,
      };

      // 更新表单值（只传递 id）
      emit('update:value', serviceInfo.id);
      emit('change', serviceInfo.id);

      // 关闭弹窗
      visible.value = false;
    } else {
      console.warn('未选择服务或服务信息不完整');
    }
  }
}

// 监听 value 变化（用于表单回显）
watch(
  () => props.value,
  (newVal) => {
    if (!newVal) {
      selectedService.value = null;
      return;
    }

    // 编辑回显：确保在已有值时展示占位名称，避免弹窗中留空
    if (!selectedService.value || selectedService.value.id !== newVal) {
      selectedService.value = {
        id: newVal,
        name: newVal,
      };
    }
  },
  { immediate: true }
);

// 组件挂载时添加消息监听
onMounted(() => {
  window.addEventListener('message', handleMessage);
});

// 组件卸载时移除消息监听
onBeforeUnmount(() => {
  window.removeEventListener('message', handleMessage);
});
</script>

<style lang="less" scoped>
.service-selector {
  display: flex;
  align-items: center;
}
</style>

